<template>
  <div>
    <div class="selectbooks">
      <div class="booksbox">
        <div v-for="(item, index) in books" :key="index" class="flexbox">
          <img
            :src="require(`../assets/img/book/${item.img}`)"
            alt=""
            @click="selbook(item.bookname)"
          />
          <div>{{ item.bookname }}</div>
        </div>
      </div>
      <div class="font1">选择书籍：{{ select }}</div>
      <button class="selected">确定</button>
    </div>
    <div class="taskInfo">
      <div class="infoTitle">发布阅读任务</div>

      <div class="infoFont">任务题目：</div>
      <input
        type="text"
        class="infoText"
        placeholder="请输入题目"
        v-model="task.name"
      />
      <div class="infoFont">选择任务(可多选)：</div>
      <ul class="taskType">
        <li v-for="(item, index) in taskInfo" class="infolist" :key="index">
          <label :for="item">
            <input
              type="checkbox"
              :id="item"
              :value="item"
              v-model="task.action"
            />
            {{ item }}
          </label>
        </li>
      </ul>

      <div class="clearfloat"></div>
      <div class="infoFont">任务描述(必填)：</div>
      <textarea
        class="textarea"
        placeholder="请输入你要发布的任务描述，不要超过225个字"
        v-model="task.details"
      ></textarea>
      <div class="infoFont">已选择任务：{{ task.action | changeValue }}</div>
      <div class="infoFont">1.选择任务对象(必选)：</div>
      <div class="taskmember">
        <div class="memberClass">
          <ul>
            <li v-for="(item, index) in classes" :key="index">
              <div class="classbox">{{ item }}</div>
            </li>
          </ul>
        </div>
        <div class="member">
          <div class="memSearch">
            <div class="searchbox">
              <input type="text" placeholder="搜索学生" />
              <button
                style="
                  background: url(../assets/img/others/search.png) no-repeat;
                  background-size: cover;
                "
              ></button>
            </div>
          </div>
          <div class="student">
            <ul>
              <li v-for="(item, index) in fourClass" :key="index">
                <label :for="item">
                  <input
                    type="checkbox"
                    :id="item"
                    :value="item"
                    v-model="getStudent"
                  />{{ item }}
                </label>
              </li>
            </ul>
          </div>
          <!-- {{getStudent | changeValue}} -->
        </div>
      </div>
      <div class="infoFont">2.选择阅读书籍(必选)：</div>
      <div class="selectBook">
        <button class="updataBook"></button>
      </div>
      <div class="infoFont">3.选择时间(必选)：</div>
      <div class="selectTime">
        <div class="time">
          开始时间：<input type="date" v-model="task.stime" />
        </div>
        <div class="time">
          结束时间：<input type="date" v-model="task.etime" />
        </div>
      </div>
      <div class="up">
        <button class="uploading" @click="setselectbook">发布任务</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import selectbook from "../assets/js/selectbook";
export default {
  data() {
    return {
      select: "",
      books: [],
      task: {
        name: "",
        action: [],
        details: "",
        people: "",
        book: "",
        stime: "",
        etime: "",
      },
      isAgree: [],
      taskInfo: [
        "朗读",
        "读后感",
        "答题",
        "思维导图",
        "插画",
        "笔记",
        "短评",
        "背诵",
      ],
      classes: [
        "四年级一班",
        "四年级二班",
        "四年级八班",
        "四年级六班",
        "四年级七班",
        "六年级测试班级",
        "四年级五班",
        "四年级三班",
        "四年级四班",
        "五年级测试班级",
      ],
      fourClass: [
        "黎子男",
        "胡旅冰",
        "黄静宜",
        "陈锦菱",
        "毛雅琳",
        "陈茂珊",
        "邓圣垲",
        "韦玥芯",
        "许子轩",
        "黄子洛",
        "高蓝青",
        "杨骐铭",
        "乔汉纾",
        "黄佳泠",
        "王芷宜",
        "史文淇",
        "吴翼萱",
        "李嫣然",
        "刘若蓝",
        "林杰",
        "郭奕婷",
        "邓雅欣",
        "崔逸臣",
        "郑峻熙",
        "曾子嫣",
        "毛雨珉",
        "李幸和",
        "滕致",
        "王俊皓",
        "苏一灐",
        "王梓聿",
        "方添锦",
        "黄佳淇",
        "刘茁翼",
        "崔子睿",
        "肖芷柔",
        "叶姿均",
        "叶锶蕊",
        "张奕晨",
        "甘正",
        "王淅",
        "骆图晟",
        "王子涵",
        "曾凡荣",
        "刘壮翼",
        "高健钊",
        "黄悦宸",
        "潘德林",
        "梁颢腾",
        "吴家辉",
        "宾雪",
      ],
      getValue: [],
      getStudent: [],
    };
  },
  methods: {
    selbook(name) {
      console.log("222");
      this.select = name;
    },
    setselectbook() {
      this.task.book = this.select;
      console.log(this.task);
      axios
        .post("http://localhost:3000/api/user/studenttask", {
          task: this.task,
        })
        .then((response) => {});
      alert("发布成功");
    },
  },
  mounted() {
    selectbook;
    axios
      .post("http://localhost:3000/api/user/showbook", {})
      .then((response) => {
        console.log(response);
        this.books = response.data;
      });
  },
  filters: {
    changeValue(type) {
      return type.toString().replace(/"([^"]*)"/g, "");
    },
  },
};
</script>

<style scoped>
@import "../assets/css/task.css";
</style>